<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">教材管理数据</h1>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft">
      <div class="data-box">
        <el-card>
          <div class="chart-box" style="width: 100%">
            <div class="chart" id="demo1"></div>
            <div class="chart-description" style="height: 41vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">教材数量比例说明</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>各类教材的订阅数量占比情况</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="data-box">
        <el-card>
          <div class="chart-box1" style="width: 100%">
            <div id="enrolled" style="width: 100%; height: 41vh;"></div>
            <div class="chart-description" style="height: 41vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">教材领取情况说明</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>教材领取情况</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import * as echarts from "echarts";
/*------变量定义开始------*/
let demo1Chart

const demo1Option = reactive(
    {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '课本情况',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1000, name: '计算机组成原理' },
            { value: 900, name: '数据结构与算法分析' },
            { value: 850, name: '操作系统原理' },
            { value: 1200, name: '计算机网络' },
            { value: 750, name: '数据库系统原理' },
            { value: 1500, name: '数学分析' },
            { value: 1200, name: '线性代数' },
            { value: 850, name: '大学物理实验教程' },
            { value: 1000, name: '现代通信技术基础' },
            { value: 950, name: '数字逻辑电路与设计' }
          ]
        }
      ]
    }
);

let enrolledChart
const enrolledData = ref([
  { value: 1248, name: '已领取' },
  { value: 635, name: '未领取' },
])
const enrolledOption = reactive( {
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: '教材领取情况占比',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '教材领取情况占比',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})
/*------钩子开始------*/
onMounted(() => {
  demo1Chart = echarts.init(document.getElementById("demo1"))
  demo1Chart.setOption(demo1Option)

  enrolledChart = echarts.init(document.getElementById("enrolled"))
  enrolledOption.series[0].data = enrolledData.value
  enrolledChart.setOption(enrolledOption)
})
onBeforeUnmount(() => {
  demo1Chart.dispose()
  enrolledChart.dispose()
})
/*------钩子结束------*/

/*------函数定义开始------*/
/*------函数定义结束------*/
</script>

<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.main-container{
  width: 100%;
  height: 115vh;
  background-color: #27B3FF;
}
.data-box{
  margin-bottom: 2vh;
}
.chart{
  width: 100%;
  height: 60vh;
}
.chart-description{
  width: 100%;
  background-color: #c5e7fa;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-box{
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 2%;
}
.chart-box1{
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 2%;
}
</style>
